<h2>人员登记系统</h2>
<!-- <p>form works!</p> -->
<div class="people_list">
    <ul>
        <li>姓名：<input type="text" id="username" [(ngModel)]="peopleInfo.username" class="form_input"/></li>
        
        <li>性别：
            <input type="radio" value="1" name="sex" id="sex1" [(ngModel)]="peopleInfo.sex"><label for="sex1">男</label>
            <input type="radio" value="2" name="sex" id="sex2" [(ngModel)]="peopleInfo.sex"><label for="sex2">女</label>
        </li>

        <li>城市：
            <select name="city" id="city" [(ngModel)]="peopleInfo.city">
                <option [value]="item" *ngFor="let item of peopleInfo.cityList">{{item}}</option>
            </select>
        </li>
        <li>爱好：
            <span *ngFor="let item of peopleInfo.hobby; let key=index;">
                <input type="checkbox" [id]="'check'+key" [(ngModel)]="item.checked"><label [for]="'check'+key">{{item.title}}</label> &nbsp;&nbsp;
            </span>
            
        </li>
        <li>备注：
            <textarea name="mark" id="mark" cols="30" rows="10" [(ngModel)]="peopleInfo.mark"></textarea>
        </li>
    </ul>
    <button (click)="doSubmit()">提交表单</button>
    <br><br><br><br>
    <pre>
        {{peopleInfo | json}}
    </pre>
</div>
